<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>赋能联盟三期</title>
  <!-- <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
  <meta name="viewport" content="user-scaleable=no"> -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" viewport-fit="cover">
  <link rel="icon" href="img/favicon.ico">
  <link rel="stylesheet" type="text/css" href="./css/reset.css">
  <link rel="stylesheet" href="https://cdn.bootcss.com/Swiper/4.4.1/css/swiper.min.css">
  <link rel="stylesheet" href="https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css">
  <!-- <link rel="stylesheet" href="./ITAssign.css"> --><!-- 这个是设计稿750px宽度对应的css样式 -->
  <link rel="stylesheet" href="css/ITAssigns.css"><!-- 这个是可视区1873px宽度所对应的css样式 -->
</head>

<body>
  <div class="swiper-container app">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="./img/1-3.gif" alt="" class="animated flash unionBot" />
      </div>

      <div class="swiper-slide swiper-slide1">
        <div class="ani bigEvent" swiper-animate-effect="fadeInRight">
          <div swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="1s" class="aTour">
            <img src="./img/41.png" alt="" style="width: 100%;" />
          </div>
        </div>
      </div>
      <div class="swiper-slide swiper-slide1">
        <div class="ani results" swiper-animate-effect="fadeInRight">
          <div class="results_d aTour" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="1s">
            <img src="./img/591.png" alt="" style="width: 100%;" />
          </div>
        </div>
      </div>
      <div class="swiper-slide swiper-slide1">
        <div class="ani bigEvent" swiper-animate-effect="fadeInRight">
          <div class="results_d1" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="1s">
            <img src="./img/611.png" alt="" style="width: 100%;" />
          </div>
        </div>
      </div>
      <div class="swiper-slide swiper-slide1">
        <div class="ani bigEvent" swiper-animate-effect="fadeInRight">
          <div class="results_d1" swiper-animate-effect="fadeInRight"
            swiper-animate-duration="1s" swiper-animate-delay="1s">
            <img src="./img/youxiu2.png" alt="" style="width: 100%;" />
            <img src="./img/56.png" alt=""
              style="width: 100%;margin-top: 1rem;" />
          </div>
        </div>
      </div>
      <div class="swiper-slide swiper-slide1">
        <div class="ani bigEvent" swiper-animate-effect="fadeInRight">
          <div swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="1s">
            <p style="position: relative;">
              <img src="./img/p6-2.png" alt="" style="width: 100%;" />
              <img src="./img/p6.png" alt="" style="width: 15.5rem;position: absolute;bottom: 1.8rem;left: .5rem;" @click="channelImgs">
              <img src="./img/22.png" alt="" style="width: 15.5rem;position: absolute;bottom: 1.8rem;right: .8rem;width: .8rem;height: .8rem;">
            </p>
          </div>
        </div>
      </div>
      <div class="swiper-slide swiper-slide1">
        <div class="ani bigEvent" swiper-animate-effect="fadeInRight">
          <div swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="1s">
            <p style="position: relative;">
              <img src="./img/p7-2.png" alt="" style="width: 100%;" />
              <img src="./img/p7.png" alt="" style="width: 15.5rem;position: absolute;bottom: 1.8rem;left: .5rem;" @click="channelImga">
              <img src="./img/22.png" alt="" style="width: 15.5rem;position: absolute;bottom: 1.8rem;right: .8rem;width: .8rem;height: .8rem;">
            </p>
          </div>
        </div>
      </div>
      <div class="swiper-slide swiper-slide1">
        <div class="ani bigEvent" swiper-animate-effect="fadeInRight">
          <div class="results_d1" swiper-animate-effect="fadeInRight"
            swiper-animate-duration="1s" swiper-animate-delay="1s">
            <img src="./img/60.png" alt="" style="width: 100%;" />
            <img src="./img/61.png" alt="" style="width: 100%;margin-top: 1rem;" />
          </div>
        </div>
      </div>
      <div class="swiper-slide swiper-slide1">
        <div class="ani results" swiper-animate-effect="fadeInRight">
          <div class="results_d" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="1s">
            <p style="position: absolute;">
              <img src="./img/p9-2.png" alt="" style="width: 100%;" />
              <img src="./img/p9.png" alt="" style="width: 15.5rem;height: 7rem;position: absolute;bottom: 1.9rem;left: .5rem;" @click="chanlImgP9">
              <img src="./img/22.png" alt="" style="width: 15.5rem;position: absolute;bottom: 1.9rem;right: .8rem;width: .8rem;height: .8rem;">
            </p>
          </div>
        </div>
      </div>
      <div class="swiper-slide swiper-slide1">
        <div class="ani results" swiper-animate-effect="fadeInRight">
          <div class="results_d aTour" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="1s">
            <img src="./img/63.png" alt="" style="width: 100%;" />
          </div>
        </div>
      </div>
      <div class="swiper-slide swiper-slide1">
        <div class="ani results" swiper-animate-effect="fadeInRight">
          <div class="results_d" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="1s">
            <p style="position: absolute;">
              <img src="./img/p11-2.png" alt="" style="width: 100%;" />
              <img src="./img/p11.png" alt="" style="width: 15.5rem;height: 6.6rem;position: absolute;bottom: 1.4rem;left: .5rem;" @click="chanlImgP11">
              <img src="./img/22.png" alt="" style="width: 15.5rem;position: absolute;bottom: 1.5rem;right: .8rem;width: .8rem;height: .8rem;">
            </p>
          </div>
        </div>
      </div>
      <div class="swiper-slide swiper-slide1">
        <div class="ani results" swiper-animate-effect="fadeInRight">
          <div class="results_d" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="1s">
            <p style="position: absolute;">
              <img src="./img/p12-2.png" alt="" style="width: 100%;" />
              <img src="./img/p12.png" alt="" style="width: 15.5rem;height: 12rem;position: absolute;bottom: 1.8rem;left: .5rem;" @click="chanlImgP12">
              <img src="./img/22.png" alt="" style="width: 15.5rem;position: absolute;bottom: 1.8rem;right: .8rem;width: .8rem;height: .8rem;">
            </p>
          </div>
        </div>
      </div>
      <div class="swiper-slide swiper-slide1">
        <div class="ani results" swiper-animate-effect="fadeInRight">
          <div class="results_d aTour" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="1s">
            <img src="./img/66.png" alt="" style="width: 100%;" />
          </div>
        </div>
      </div>
      <div class="swiper-slide swiper-slide1">
        <div class="ani results" swiper-animate-effect="fadeInRight">
          <div class="results_d" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="1s">
            <p style="position: absolute;">
              <img src="./img/p14-2.png" alt="" style="width: 100%;" />
              <img src="./img/p14.png" alt="" style="width: 15.5rem;height: 7rem;position: absolute;bottom: .8rem;left: .5rem;" @click="chanlImgP14">
              <img src="./img/22.png" alt="" style="width: 15.5rem;position: absolute;bottom: .8rem;right: .8rem;width: .8rem;height: .8rem;">
            </p>
          </div>
        </div>
      </div>
      <div class="swiper-slide swiper-slide1">
        <div class="ani results" swiper-animate-effect="fadeInRight">
          <div class="results_d" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="1s">
            <p style="position: absolute;">
              <img src="./img/p15-2.png" alt="" style="width: 100%;" />
              <img src="./img/p15.png" alt="" style="width: 15.5rem;height: 9.6rem;position: absolute;bottom: .8rem;left: .5rem;" @click="chanlImgP15">
              <img src="./img/22.png" alt="" style="width: 15.5rem;position: absolute;bottom: .8rem;right: .8rem;width: .8rem;height: .8rem;">
            </p>
          </div>
        </div>
      </div>
      <div class="swiper-slide swiper-slide1">
        <div class="ani results" swiper-animate-effect="fadeInRight">
          <div class="results_d aTour" swiper-animate-effect="fadeInRight"
            swiper-animate-duration="1s" swiper-animate-delay="1s">
            <img src="./img/69.png" alt="" style="width: 100%;" />
          </div>
        </div>
      </div>
      <div class="swiper-slide swiper-slide1">
        <div class="ani results" swiper-animate-effect="fadeInRight">
          <div class="results_d" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="1s">
            <p style="position: absolute;">
              <img src="./img/p17-2.png" alt="" style="width: 100%;" />
              <img src="./img/p17.png" alt="" style="width: 15.5rem;height: 8.6rem;position: absolute;bottom: .8rem;left: .5rem;" @click="chanlImgP17">
              <img src="./img/22.png" alt="" style="width: 15.5rem;position: absolute;bottom: .8rem;right: .8rem;width: .8rem;height: .8rem;">
            </p>
          </div>
        </div>
      </div>
      <div class="swiper-slide swiper-slide1">
        <div class="ani bigEvent" swiper-animate-effect="fadeInRight">
          <div class="results_d1" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="1s" style="margin-top: 1.66rem;">
            <img src="./img/bt.png" alt="" style="width: 60%;" />
            <!-- <img src="./img/2.png" alt="" style="width: 100%;margin-top: 1rem;" @click="onlineFill" /> -->
            <img src="./img/1.2.png" alt="" style="margin-top: 1rem;" @click="onlineFill" />
            <img src="./img/1.1.png" alt="" style="margin-top: .76rem;" />
            <img src="./img/3.png" alt="" style="width: 100%;margin-top: 1rem;" />
          </div>
        </div>
      </div>
      <div class="swiper-slide swiper-slide1">
        <div class="ani bigEvent" swiper-animate-effect="fadeInRight">
          <div class="results_dt" swiper-animate-effect="fadeInRight"
            swiper-animate-duration="1s" swiper-animate-delay="1s">
            <img src="./img/30.png" alt="" style="width: 77%;" />
            <img src="./img/301.png" alt=""
              style="width: 100%;margin-top: 1rem;" @click="firstPhase" />
            <img src="./img/302.png" alt=""
              style="width: 100%;margin-top: 1rem;" @click="secondPhase" />
          </div>
        </div>
      </div>
      <div class="swiper-slide swiper-slide2">
        <div class="ani unionBotNe" swiper-animate-effect="fadeInRight">
          <div swiper-animate-effect="fadeInRight" swiper-animate-duration="1s"
            swiper-animate-delay="1s">
            <img src="./img/ITJ.png" alt="" />
            <img src="./img/ITF.png" alt="" />
          </div>
        </div>
      </div>
    </div>

    <div class="fillIn" v-if="isInp">
      <div class="fill">
        <p class="phoneNane">请填写手机号</p>
        <div class="theInput">
          <img src="./img/phone.png" alt="" class="telphone">
          <input type="text" class="text_input" v-model="inpVal" />
        </div>
        <img src="./img/confirm.png" alt="" class="confirm" @click="obtainInp">
      </div>
    </div>

    <div class="fillIns" v-if="isShow">
      <p class="exclamation"><img src="./img/point.png" alt=""></p>
      <p class="phoneNanes">很抱歉暂时无法预览</p>
      <img src="./img/goBack.png" alt="" class="confirms" @click="exclamation">
    </div>

    <!-- 第五张 -->
    <div v-if="channel" class="channelImg" @click="channelChange">
      <img src="./img/p6.png" alt="">
    </div>
    <!-- 第五张 -->
    <div v-if="seven" class="channelImg" @click="channelChange">
      <img src="./img/p7.png" alt="" style="height: 8rem;">
    </div>
    <!-- 第九张 -->
    <div v-if="nine" class="channelImg" @click="channelChange">
      <img src="./img/p9.png" alt="" style="height: 8rem;">
    </div>
    <!-- 第十一张 -->
    <div v-if="eleven" class="channelImg" @click="channelChange">
      <img src="./img/p11.png" alt="" style="height: 9rem;">
    </div>
    <!-- 第十二张 -->
    <div v-if="twelve" class="channelImg" @click="channelChange">
      <img src="./img/p12.png" alt="" style="height: 12rem;">
    </div>
    <!-- 第十四张 -->
    <div v-if="fourteen" class="channelImg" @click="channelChange">
      <img src="./img/p14.png" alt="" style="height: 10rem;">
    </div>
    <!-- 第十五张 -->
    <div v-if="fifteen" class="channelImg" @click="channelChange">
      <img src="./img/p15.png" alt="" style="height: 10rem;">
    </div>
    <!-- 第十七张 -->
    <div v-if="seventeen" class="channelImg" @click="channelChange">
      <img src="./img/p17.png" alt="" style="height: 10rem;">
    </div>
  </div>
</div>
  <!-- <script src="./rem.js"></script> --><!-- 这个是设计稿750px宽度 -->
  <script src="./js/rems.js"></script> <!-- 这个是可视区1873px宽度 -->
  <!-- <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> -->
  <script src="https://cdn.bootcss.com/Swiper/4.4.1/js/swiper.min.js"></script>
  <script src="https://cdn.suoluomei.com/common/js2.0/swiper.animate/1.0.3/1.0.3.min.js"></script>
  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>  <!-- //vue.js -->
  <script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"></script><!-- //router.js -->
</body>
<script type="text/javascript" src="./js/index.js"></script>
</html>
